import React from 'react';
import { Card, Descriptions, Typography } from 'antd';

const { Text } = Typography;

const NetworkOverview = ({ network }) => {
  return (
    <Card className="network-overview" title="网络概览" size="small">
      <Descriptions column={3} size="small">
        <Descriptions.Item label="Tracker名称">
          {network.trackerName}
        </Descriptions.Item>
        <Descriptions.Item label="Tracker URL">
          <Text code>{network.trackerUrl}</Text>
        </Descriptions.Item>
        <Descriptions.Item label="网络状态">
          {network.status === 'active' ? 
            <Text type="success">活跃</Text> : 
            <Text type="warning">非活跃</Text>
          }
        </Descriptions.Item>
        <Descriptions.Item label="成员数量">
          {network.memberCount}
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {new Date(network.createdAt).toLocaleString('zh-CN')}
        </Descriptions.Item>
        <Descriptions.Item label="网络描述">
          {network.description || '暂无描述'}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  );
};

export default NetworkOverview;